<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title><!--{$lang.page.mue.roleper}--></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/lay/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/lay/layui/index.css" media="all">
</head>
<body>

<div class="layui-fluid">
<form name="addItem" method="post" lay-filter="component-form-group" class="layui-form">
  <input type="hidden" id="check_id" name="check_id[]">
  <input type="hidden" id="role_id" name="role_id">
</form>

    <div class="layui-card">
        <div class="layui-card-body" style="min-width:45%; float: left; padding: 0 30px;">
          <!-- <div id="result"></div> -->
            <table id="datalist" lay-filter="datalist"></table>
            <script type="text/html" id="zizeng">{{d.LAY_TABLE_INDEX+1}}</script>
            <script type="text/html" id="bartool">
              <a class="layui-btn layui-btn-xs edit" id="reloadBtn" data-set="{{d.id}}"><!--{$lang.page.mue.roleper}--></a>
            </script>
        </div>
        <div style="display: flex; justify-content: space-between; width:50%;">
            <div id="treeload" style="border: 1px solid #eaeaea; float: left; width:100%; padding: 20px 30px;"></div>
            <div style="float: left; width:100%; margin-left:20px">
            	<div id="muesub"></div>
            	<div class="layui-btn-container">
                	<button type="button" class="layui-btn sbut" lay-demo="getChecked" style="display: none">选择数据</button>
                	<button type="button" class="layui-btn sbut" id="submit" lay-submit lay-filter="submit" style="display: none">保存数据</button>
            	</div>
            </div>
        </div>
    </div>

<script src="/static/lay/layui/layui.js"></script>
<script type="text/javascript">
	let submits=1;
    layui.config({
       base: '/static/lay/' //静态资源所在路径
    }).extend({
        roleper:'lib/roleper'
        , xadmin:'lib/xadmin'
        , lang:'lib/lang'
    }).use(['jquery','roleper', 'xadmin', 'tree','table', 'layer', 'util','lang'], function () {

            var $ = layui.$
            , form = layui.form
            , tree = layui.tree
            , util = layui.util
            , table = layui.table
            , roleper = layui.roleper
            , toolbar = roleper.showtool({mid:4}) ? false : true; //根据权限是否显示操作列
            var lang=layui.lang.init();

            table.render({
            elem: '#datalist'
            , height: 'auto'
            , url: '#' //数据接口
            , method: 'post'
            , page: true //开启分页
            , limit: 10
            , cols: [[ //表头
                {field: 'zizeng', title: function(){ return lang.serial }, align: "center", fixwidth: true, width: 80, templet:'#zizeng'},
                {field: 'title', title: function(){ return lang.name }},
                {fixed: '', title: function(){ return lang.operation }, width: 160, align: 'center', toolbar: '#bartool', hide:toolbar}
            ]],
            done: function() {
                    layer.closeAll('loading');
                    roleper.render({mid:4,per:[{sys:'edit'}]/*,full:false,par:true*/});//law 设置长宽，full是否全屏，par父窗口打开
                }
            });
            //按钮事件
            util.event('lay-demo', {
                getChecked: function(othis){
                    submits=2;
                    let checkedData = tree.getChecked('demoId1');
                    var operatevalue=[];
                    checkedData.forEach((items,index)=>{
                    	if(items.operate){
                    		var operates={};
                    		var param={};
                    		var name={};
                    		(eval(items.operate)).forEach((item) => {
                    			if($('input:checkbox[name='+item.key+items.id+']').is(':checked')){
                    				operates['id']=items.id;
                    				operates['code']=items.code;
                                    operates['url']=items.url=='#'?null:items.code+items.url;
                    				if($('input:checkbox[name='+item.key+items.id+']').val()==item.key){
                                        operates[item.key]=item.url;
                                        param[item.key]=item.value;
                                        name[item.key]=item.name;
                                    };
                                }
                            })
                            delete checkedData[index].operate;
                            if (JSON.stringify(operates) === "{}") {
                                delete operates;
                            }else{
                            	operates['param']=param;
                            	operates['name']=name;
                            	checkedData[index].operate=operates;
                            }
                    	}
                        delete checkedData[index].code;
                    })
                    $('#check_id').val(JSON.stringify(checkedData));
                }
                ,reload: function(){
                    tree.reload('demoId1', {
                    });
                }
            });

            $(document).on('click', '#reloadBtn', function(e) {
                let role_id = e.target.dataset.set; // 获取搜索条件
                const div = $('#muesub');
                var datalist=[];
                var operate=[];
                $('#role_id').val(role_id);
                // 异步获取树的新数据
                $.ajax({
                    url: '/admin/role/roleper', // 假设的后端接口
                    data: {role_id: role_id},
                    type: 'GET',
                    dataType: 'json',
                    success: function(res){
                        datalist = res.data;
                        operate = res.operate;
                        div.html('');
                        // 树组件
                        tree.render({
                            elem: '#treeload'
                            ,data: datalist
                            ,id: 'demoId1'
                            ,opt: true
                            ,optdata:['id','code','url','operate']
                            ,click: function(obj){
                                operate.forEach((items,index)=>{
                                	$("#ope"+items.id).hide();
                                })
                                $("#ope"+obj.data.id).show();
                            }
                            ,oncheck: function(obj){
                            }
                            ,operate: function(obj){
                                // var type = obj.type;
                            }
                            ,showCheckbox: true  //是否显示复选框
                            ,accordion: false  //是否开启手风琴模式
                            ,onlyIconControl: true //是否仅允许节点左侧图标控制展开收缩
                            ,isJump: false  //点击文案跳转地址
                            ,edit: false  //操作节点图标
                        });
                        // 生成操作
                        operate.forEach((items,index)=>{
                        	let content='';
                            if(items.operate){
                                (eval(items.operate)).forEach((item) => {
                                    content += '<li><span class="layui-tree-iconClick"><i class="layui-icon layui-icon-file"></i></span>';
                                    content += '<input type="checkbox" name="'+item.key+items.id+'" class="layuiTreeCheck" '+ (item.checked ? "checked" : "") +' value="'+item.key+'">';
                                    content += item.name;
                                    content += '</li>';
                                })
                            }
                            var childrendiv=$('<div id="ope'+items.id+'"></div>'); //创建一个父div
                                childrendiv.addClass('treesub');   //添加css样式
                                childrendiv.css({display:'none'});   //添加css样式   
                                childrendiv.html(content);       
                                div.append(childrendiv); 
                        })
                        $('.sbut').show();
                    }
                });
            });
            form.on('submit(submit)', function () {
                var data={};
                data.check_id=$('#check_id').val();
                data.role_id=$('#role_id').val();
                if(!data.role_id || submits==1){
                    layer.alert("<!--{$lang.page.public.select}-->!");
                    return false;
                }else{
                    $('#submit').attr("disabled",true);
                    $('#submit').addClass('layui-btn-disabled'); 
                }
                $.post('/admin/role/roleper/',data,function(res){
                    if(res.code == 200){
                    	layer.msg(res.msg);
                    	setTimeout(() => {
                    		window.location.reload();
                		}, 2000);
                    }else{
                        layer.msg(res.msg);
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
    });
</script>
</body>
</html>